<template>
  <a-form-model
    ref="formData"
    :model="formData"
    labelAlign="left"
    :suring="loading"
  >
      <!-- :label-col="{ span: 3 }"
    :wrapper-col="{ span: 6 }" -->
  <!-- style="padding:36px 24px" -->
    <!-- <h2 style="margin-bottom:16px">{{ $t('yjts') }}</h2> -->
    <a-row>
      <a-form-item label="升级结果推送" >
        <a-radio-group v-model="formData.enabled" v-decorator="['radio-group']" @change="select">
          <a-radio :value="true">推送</a-radio>
          <a-radio :value="false">不推送</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-row>
    <a-row>
      <a-form-item label="推送频率">
        <a-checkbox-group v-model="formData.timesList" v-decorator="['checkbox-group']" :disabled="!formData.enabled">
          <a-row>
            <a-checkbox value="0">每天</a-checkbox>
            <a-checkbox value="1">每周</a-checkbox>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
    </a-row>
    <a-row>
      <a-form-item label="车型选择">
        <car-model-code-select
          mode="multiple"
          :query="{ time:instantUpdateTime, selectAll: false}"
          :has-all="false"
          :clear="true"
          v-model="formData.modelCodes"
          @changeoption="(val,item) => {queryParamsDesc.modelCode = item ? item.showName : undefined;}"
          style="width:70%"
          :disabled="!formData.enabled"
          @change="changeCarModel"
        ></car-model-code-select>
      </a-form-item>
    </a-row>
    <a-row>
      <a-form-item label="任务选择">
        <task-select
          :query="modelCodeQuery"
          :time="taskSelectTime"
          :readonly="!formData.enabled"
          mode="multiple"
          :default-task-id="formData.taskIds"
          @changeoption="(val) => {changeOption(val, 'taskIds');}"
          :clear="true"
          style="width:70%"
          :init="init"
        ></task-select>

      </a-form-item>
    </a-row>
    <!-- <a-row>
      <a-form-item label="ECU选择">
        <a-select placeholder="全部ECU" disabled>
        </a-select>
      </a-form-item>
    </a-row> -->
    <a-row>
      <a-form-item label="推送邮箱">
        <a-input v-model="formData.email" placeholder="请输入邮箱" style="width:70%" :disabled="!formData.enabled"/>
        <span style="width:30%;padding-left:5px"></span>
      </a-form-item>
    </a-row>
    <!-- <a-row>
      <a-col :span="24" style="padding-left:200px">
        <a-button type="primary" html-type="submit" @click="editEmailPush">确定</a-button>
        <a-button  @click="cancel" :style="{ marginLeft: '8px' }">取消</a-button>
      </a-col>
    </a-row> -->
  </a-form-model>
</template>

<script>

import userApi from '@/api/modules/system/user'
import CarModelCodeSelect from '@/views/components/CarModelCodeSelect'
import { mapState } from 'vuex'
import TaskSelect from '@/views/components/TaskSelect'
import taskApi from '@/api/modules/task'



const initQueryParams = {
    modelName: undefined,
    modelCodes:undefined,
    taskIds: undefined
}

export default {
  components: {
    CarModelCodeSelect,
    TaskSelect
  },
  props: {
    emailPushByAccount: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
        loading: false,
        formData:{
          id:'',
          account:'',
          email:'',
          enabled: false,
          timesList: ['0'],
          modelName: undefined,
          modelCodes: undefined,
          taskIds: undefined
        },
        queryParamsDesc: { ...initQueryParams },
        value: false,
        taskSelectTime: 12344321,
        disabled: false,
        taskList: undefined,
        modelCodeQuery: {},
        isSearch: false,
        taskOptions: [],
        init: false

    }
  },
  methods: {
    changeOption (val, key) {
      this.formData[key] = val
    },
    // getEmailPush () {
    //       userApi.getEmailPush()
    //       .then(res => {
    //           if(res.data){
    //             this.formData = Object.assign(this.formData,res.data)
    //             if(!this.formData.enabled){
    //               this.disabled = true
    //             }else{
    //               this.disabled = false
    //             }
    //           }else{
    //             this.disabled = true
    //           }

    //         })
    //         .finally(() => {
    //         })
    //     },
    // editEmailPush () {
    //   this.loading = true
    //   userApi.editEmailPush(this.formData)
    //   .then(() => {
    //       this.$message.success(this.$t('successfullyOperation'))
    //     })
    //     .finally(() => {
    //       this.loading = false
    //     })
    // },
    //  cancel() {
    //     this.getEmailPush()
    //  },
     select(event){
        console.log(this.formData.enabled)
        // if(!this.formData.enabled){
        //   this.disabled = true
        // }else{
        //   this.disabled = false
        // }
     },
     checkedchange(){
        this.$forceUpdate()
     },
     changeCarModel(){
      if(this.formData.modelCodes && this.formData.modelCodes.length > 0){
          this.init = true
      }else{
          this.init = false
      }

      console.log('change carmodel')
      this.modelCodeQuery = {modelCodes: this.formData.modelCodes}
      this.taskSelectTime = Date.now()

     },
     clearTaskList () {
       this.taskOptions = []
       this.isSearch = false
     },
     searchForTask(value='') {
        const vm = this
        vm.taskOptions = []
        vm.isSearch = false
        if (!value) return
        vm.isSearch = true

        this.$set(this.modelCodeQuery,'name',value)

        taskApi.getTaskSelect(this.modelCodeQuery).then((res) => {
          this.taskOptions = res.data.map(item => {
            let { name } = item
            return {
              id: item.id,
              name
            }
          })
        })
     },
    // 获取表单中的数据
    getFormData () {
      return new Promise((resolve, reject) => {
        const data = this.formData
        this.$refs.formData.validate(valid => {
          if (!valid) {
            reject(valid)
          }
          resolve(data)
        })
      })
    },
    // 根据账号获取用户邮件推送配置
    getEmailPushByAccount (val) {
      this.$api.getEmailPushByAccount({ account: val }).then((res) => {
        console.log(res.data, '值')
        this.formData.id = res.data.id
        this.formData.account = this.emailPushByAccount
        this.formData.email = res.data.email
        this.formData.enabled = res.data.enabled
        this.formData.modelCodes = res.data.modelCodes
        this.formData.taskIds = res.data.taskIds
        this.formData.timesList = res.data.timesList
      })
    },
  },
  created () {
    // this.getEmailPush()
  },
  mounted () {
    this.getEmailPushByAccount(this.emailPushByAccount)
    this.formData.account = this.emailPushByAccount
  },
  computed: {
    ...mapState({
        instantUpdateTime: (state) => state.app.instantUpdateTime
    })
  }

}
</script>

<style>
</style>